import { Meta, Story, Canvas } from '@storybook/addon-docs'
import ColorList from '../../../ch/demo/ColorList.vue'

<Meta title="Foundations/Fonts/Colors" component={ColorList} argTypes={{}} />

export const Template = (args, { argTypes }) => ({
  components: { ColorList },
  template: '<ColorList />',
})

# Text colors

Text colors should be automatically defined. You can force them with specific classes though:

<Canvas>
  <div>
    <div class="color--default">color--default</div>
    <div class="color--light">color--light</div>
    <div class="color--link">color--link</div>
  </div>
</Canvas>

# Negative color

<Canvas className="storybook-bg-negative">
  <div>
    <div class="color--negative">color--negative</div>
  </div>
</Canvas>

# All text color variants

Colors have a complete spectrum based on Tailwind configuration. Use them with precaution and be sure the contrast fit the accessibility recommendations.

<Canvas>
  <div class="storybook-backgrounds">
    <div class="color--text-900">color--text-900</div>
    <div class="color--text-800">color--text-800 – default text color</div>
    <div class="color--text-700">color--text-700</div>
    <div class="color--text-600">color--text-600</div>
    <div class="color--text-500">color--text-500 – still AA Accessible on white backgrounds</div>
    <div class="color--text-400  bg--secondary-900">color--text-400</div>
    <div class="color--text-300  bg--secondary-800">color--text-300</div>
    <div class="color--text-200  bg--secondary-700">color--text-200</div>
    <div class="color--text-100  bg--secondary-600">color--text-100</div>
    <div class="color--text-50   bg--secondary-500">color--text-50</div>
    <div class="color--white     bg--secondary-400">color--white</div>
  </div>
</Canvas>

<Canvas>
  <div class="storybook-backgrounds">
    <div class="color--primary-900">color--primary-900</div>
    <div class="color--primary-800">color--primary-800</div>
    <div class="color--primary-700">color--primary-700</div>
    <div class="color--primary-600">color--primary-600 – default link color</div>
    <div class="color--primary-500">color--primary-500</div>
    <div class="color--primary-400  bg--secondary-900">color--primary-400</div>
    <div class="color--primary-300  bg--secondary-800">color--primary-300</div>
    <div class="color--primary-200  bg--secondary-700">color--primary-200</div>
    <div class="color--primary-100  bg--secondary-600">color--primary-100</div>
    <div class="color--primary-50   bg--secondary-500">color--primary-50</div>
    <div class="color--white    bg--secondary-400">color--white</div>
  </div>
</Canvas>

# Flexible Colors for future projects

For future projects, if you generate the CSS by your own, it's possible to use not only the mentioned colors above, but the whole palette of colors declared in the Tailwind config and all its variations.

<Canvas>
  <Story name="Example" args={{}}>
    {Template.bind({})}
  </Story>
</Canvas>
